<template>
    <div class="container">
      <!-- 头部区域 -->
      <div class="header">
        <div class="letter-k">
          <div class="vertical-line"></div>
          <div class="diagonal-line-1"></div>
          <div class="diagonal-line-2"></div>
        </div>
        <div class="header-title">{{ category }}</div>
        <div class="header-more" @click="handleMoreClick">更多</div>
      </div>
      
      <!-- 内容区域 -->
      <div class="info">
        <!-- 顶部大图新闻 -->
        <div class="leibie-img">
          <div 
            class="leibie-img-title"
            :class="{ 'bold-text': isTitleBold }"
            @mouseenter="isTitleBold = true"
            @mouseleave="isTitleBold = false"
          >
            {{ featuredNews.title }}
          </div>
          <div class="news-image-waiceng">
            <img 
              :src="featuredNews.imageUrl" 
              :alt="featuredNews.title" 
              class="news-image"
              @mouseenter="isTitleBold = true"
              @mouseleave="isTitleBold = false"
            >
          </div>
        </div>
        
        <!-- 新闻列表 -->
        <div class="news-list">
          <div 
            v-for="(news, index) in newsList" 
            :key="index" 
            class="news-item"
          >
            <div class="news-title">{{ news.title }}</div>
            <div class="news-date">{{ news.date }}</div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "NewsSingleImgTitle",
    props: {
      category: {
        type: String,
        default: "国际"
      },
      featuredNews: {
        type: Object,
        default: () => ({
          title: "中国公布《实施〈中华人民共和国反外国制裁法〉的规定》中国公布《实施〈中华人民共和国反外国制裁法〉的规定》",
          imageUrl: "http://cms-bucket.ws.126.net/2025/0316/bc0c4564p00st7haq001ac0009c0070c.png",
          date: "2025-03-25 10:36"
        })
      },
      newsList: {
        type: Array,
        default: () => [
          { title: "中方：联合国维和行动必须坚持维和三原则", date: "2025-03-25 12:01" },
          { title: "中企在尼加拉瓜建设光伏发电站", date: "2025-03-25 12:01" },
          { title: "台湾花莲县近海发生5.1级地震", date: "2025-03-25 10:55" },
          { title: "中国公布《实施〈中华人民共和国反外国制裁法〉的规定》", date: "2025-03-25 10:36" },
          { title: "台当局强化全民防卫纵深推进", date: "2025-03-25 08:51" },
          { title: "新媒：'台独'分子沈伯洋陷美国间谍疑云", date: "2025-03-25 08:54" }
        ]
      }
    },
    data() {
      return {
        isTitleBold: false
      }
    },
    methods: {
      handleMoreClick() {
        this.$emit('more-click');
      }
    }
  }
  </script>
  
  <style scoped>
  .container {
    width: 340px;
    height: 595px;
  }
  
  .header {
    width: 100%;
    height: 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .info {
    width: 100%;
    height: 94%;
    border: 3px solid rgba(237, 237, 237, 1);
    position: relative;
  }
  
  .letter-k {
    height: 28px;
    position: absolute;
    left: 13px;
  }
  
  .header-title {
    font-size: 20px;
    color: #ff4d4f;
    font-weight: bold;
    margin-left: 30px;
  }
  
  .header-more {
    color: rgba(178, 178, 178, 1);
    font-size: 14px;
    font-weight: bold;
    margin-right: 5px;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  .header-more:hover {
    color: #ff4d4f;
  }
  
  .leibie-img {
    width: 100%;
    height: 46%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .news-image-waiceng {
    width: 97%;
    height: 94%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  .news-image {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    z-index: 1;
  }
  
  .news-image:hover {
    transform: scale(1.1);
  }
  
  .leibie-img-title {
    font-size: 14px;
    width: 94%;
    height: 35px;
    background-color: rgba(0, 0, 0, 0.6);
    padding-left: 10px;
    color: white;
    position: absolute;
    bottom: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 35px;
    z-index: 2;
    transition: font-weight 0.3s ease;
  }
  
  .news-list {
    width: 100%;
    height: 54%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  
  .news-item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }
  
  .news-title {
    font-size: 14px;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    margin-left: 5px;
  }
  
  .news-date {
    color: rgba(178, 178, 178, 1);
    font-size: 12px;
    margin-left: 5px;
  }
  
  .news-title:hover {
    color: #ff4d4f;
    /* background-color: #f9f9f9; */
    transform: translateX(5px);
  }
  
  .bold-text {
    font-weight: bold;
  }
  
  /* K字母样式 - 需要根据你的letter-k.css补充 */
  .vertical-line {
    /* 垂直线的样式 */
  }
  
  .diagonal-line-1 {
    /* 第一条对角线的样式 */
  }
  
  .diagonal-line-2 {
    /* 第二条对角线的样式 */
  }
  </style>